<template>
  <div class="U000005-template1"
       :class="className">
    <!-- style -->
    <div v-html="css"></div>

    <div class="self_pick">
      <i class="iconfont icon-fontclass-dianpu"></i>
      <span class="self_name">自提点名称 | 切换 ></span>
    </div>

  </div>
</template>

<script>
	// 自定义样式
	const css = function () {
		if(this.datas.preview_color) {
			const {
				preview_color,
				font_color,
			} = this.datas;

			return `
        .component-${this.id} .self_pick{
            background-color: ${preview_color.color || '#f8f8f8'};
            background-image: url(${preview_color.isColor == 2 ? preview_color.image : ''});
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            color: ${font_color};
        }
    `;
		}
	};

	export default {
		props: ['id', 'datas', 'styles'],
		computed: {
			css() {
				return '<style>' + css.call(this) + '</style>';
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			},
		},

		methods: {
		},

		mounted() {
		}
	};
</script>

<style lang="less" scoped>
  // 默认
  .component-wrapper {
    width: 375px;
  }

  .self_pick {
    display: flex;
    padding: 10px;
    .iconfont {
      font-size: 20px;
    }
    .self_name {
      line-height: 30px;
    }
  }
</style>
